<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文学类</title>
	<base target="_blank">
	<style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        a {
        	text-decoration: none;
        	color: #000;
        }
        #booknav {
            width: 100%;
            height: 40px;
            background-color: #f3f4f5;
            margin-bottom: 10px;
        }
        #booknav a {
            font-size: 20px;
            margin:0 160px 0 160px;
            line-height: 40px;
        }
        .page {
            overflow: hidden;
            width: 100px;
            height: 24px;
            margin: 0 auto;
            margin-top: 10px;
        }
        .page .pageli {
            float: left;
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
        }
        .page .pageli:hover {
        	cursor: pointer;
        }
        .books {
            width: 1000px;
            height: 990px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 0 auto;
        }
        .book {
            float: left;
            border: 1px solid #ccc;
            padding: 10px;
            margin-right: 10px;
            margin-bottom: 12px;
        }
        .book img {
            width: 300px;
            height: 200px;
            margin-bottom: 20px;
        }
        .book h3 {
            color: #f00;
            margin-bottom: 20px;
        }
        .book p {
        	color: #000;
            width: 300px;
            height:200px;
        }
        #WXh {
        	width: 1200px;
        	height: 100px;
        	margin:0 auto;
        	margin-bottom: 10px;
        }
    </style>
    <script>
        window.onload = function () {
            //一。动态添加数据
            //1.找到容器ul
            var books = document.getElementsByClassName('books')[0]
            //2.创建li
            var strLis = ''
            for (var i = 0; i < 6; i++) {
                strLis += `<li class='book'>
                				<a href="${booksData.Seaofbook[i].mail}">
                                <img src="${booksData.Seaofbook[i].image}" alt="">
                                <h3>${booksData.Seaofbook[i].name}</h3>
                                <p>${booksData.Seaofbook[i].way}</p>
                                </a>
                            </li>`
            }
            //3.添加li到ul
            books.innerHTML = strLis
            //二。分页
            //1.动态添加分页指示符
            var booksCount = booksData.Seaofbook.length  //食材总数
            var pageCount = 6 //每页显示的食材数量
            var pageSize = Math.ceil(booksCount / pageCount) //总页数
            var pageUl = document.getElementsByClassName('page')[0]
            var strPages = ''
            for (var i = 0; i < pageSize; i++) {
                strPages += `<li class='pageli'>${i + 1}</li>`
            }
            pageUl.innerHTML = strPages
            //2.添加分页符的单击事件
            var pagelis = document.getElementsByClassName('pageli')
            for (let i = 0; i < pagelis.length; i++) {
               pagelis[i].onclick = function(){
                var strLis = ''
                for (var j = i * 6; j < (i + 1) * 6; j++) {
                    if (booksData.Seaofbook[j]) {
                        strLis += `<li class='book'>
                        		<a href="${booksData.Seaofbook[j].mail}">
                                <img src="${booksData.Seaofbook[j].image}" alt="">
                                <h3>${booksData.Seaofbook[j].name}</h3>
                                <p>${booksData.Seaofbook[j].way}</p>
                                </a>
                            </li>`
                    }
                }
                //3.添加li到ul
                books.innerHTML = strLis
               }
            }
        }
    </script>
</head>
<body>
	<div id="WXh">
		<img src="images/WX.png" />
	</div>
    <div id="booknav">
        <a href="HomePage.html">首页</a>
        <a href="xuanyi.html">悬疑类</a>
        <a href="wenxue.html">文学类</a>
        <a href="sanwen.html">散文类</a>
    </div>
	<ul class='books'>
        <li class='book'>
        	<a href="http://t.icesmall.cn/bookDir/60/520/0.html">
            <img src="https://img1.doubanio.com/view/subject/l/public/s6506917.jpg" />
            <h3>哈姆雷特</h3>
            <p>《哈姆雷特（Hamlet）》是由英国剧作家威廉·莎士比亚创作于1599年至1602年间的一部悲剧作品。戏剧讲述了叔叔克劳狄斯谋害了哈姆雷特的父亲，篡取了王位，并娶了国王的遗孀乔特鲁德；哈姆雷特王子因此为父王向叔叔复仇。</p>
            </a>
        </li>
    </ul>
    <ul class='page'>
    </ul>
    <script>
    	var booksData={
    		"Seaofbook": [
    	{
            "name": "哈姆雷特",
            "		author": "莎士比亚",
			"way": "《哈姆雷特（Hamlet）》是由英国剧作家威廉·莎士比亚创作于1599年至1602年间的一部悲剧作品。戏剧讲述了叔叔克劳狄斯谋害了哈姆雷特的父亲，篡取了王位，并娶了国王的遗孀乔特鲁德；哈姆雷特王子因此为父王向叔叔复仇。",
            "image": "https://img1.doubanio.com/view/subject/l/public/s6506917.jpg",
            "mail":"http://t.icesmall.cn/bookDir/60/520/0.html",
           	"classBook":"文学"
		},
		{
		    "name": "追风筝的人",
		    "author": "卡勒德·胡赛尼",
			"way": "12岁的阿富汗富家少爷阿米尔与仆人哈桑情同手足。然而，在一场风筝比赛后，发生了一件悲惨不堪的事，阿米尔为自己的懦弱感到自责和痛苦，逼走了哈桑，不久，自己也跟... ",
		    "image": "https://img3.doubanio.com/view/subject/l/public/s1727290.jpg",
		    "mail":"http://www.99csw.com/book/2465/index.htm",
		    "classBook":"文学"
		},
		{
		    "name": "小王子",
		    "author": "圣埃克苏佩里",
			"way": " 小王子是一个超凡脱俗的仙童，他住在一颗只比他大一丁点儿的小行星上。陪伴他的是一朵他非常喜爱的小玫瑰花。但玫瑰花的虚荣心伤害了小王子对她的感情。小王子告别小行... ",
		    "image": "https://img3.doubanio.com/view/subject/l/public/s1103152.jpg",
		    "mail":"http://www.artsdome.com/books/xwz/",
		    "classBook":"文学"
		},
		{
		    "name": "百年孤独",
		    "author": "加西亚·马尔克斯",
			"way": "《百年孤独》是魔幻现实主义文学的代表作，描写了布恩迪亚家族七代人的传奇故事，以及加勒比海沿岸小镇马孔多的百年兴衰，反映了拉丁美洲一个世纪以来风云变幻的历史。 ",
		    "image": "https://img9.doubanio.com/view/subject/l/public/s6384944.jpg",
		    "mail":"http://www.100niangudu.com/",
		    "classBook":"文学"
		},
		{
		    "name": "霍乱时期的爱情",
		    "author": "加西亚·马尔克斯",
			"way": " 《霍乱时期的爱情》是加西亚•马尔克斯获得诺贝尔文学奖之后完成的第一部小说。讲述了一段跨越半个多世纪的爱情史诗，穷尽了所有爱情的可能性：忠贞的、隐秘的、粗暴的、羞怯的、柏拉图式的、放荡的、转瞬即逝的、生死相依的……再现了时光的无情流逝，被誉为“人类有史以来最伟大的爱情小说”，是20世纪最重要的经典文学巨著之一",
		    "image": "https://img3.doubanio.com/view/subject/l/public/s11284102.jpg",
		    "mail":"http://www.beduu.com/read-2364.html",
		    "classBook":"文学"
		},
		{
		    "name": "月亮与六便士",
		    "author": "威廉·萨默塞特·毛姆",
			"way": " “满地都是六便士，他却抬头看见了月亮。” 银行家查尔斯，人到中年，事业有成，为了追求内心隐秘的绘画梦想，突然抛妻别子，弃家出走。他深知：人的每一种身份都是一... ",
		    "image": "https://img1.doubanio.com/view/subject/l/public/s29634528.jpg",
		    "mail":"https://yuedu.baidu.com/ebook/02840194d05abe23482fb4daa58da0116c171f00?pn=4",
		    "classBook":"文学"
		},
		{
		    "name": "萨拉戈手稿",
		    "author": "扬·波托茨基",
			"way": "亲爱的阿方索， 我们来到这里并非因为偶然…… 我们在等你。 瓦隆卫队的年轻军官阿方索赶赴马德里加入他的军队。但他很快就发现，他被困在一家神秘的路边客栈，和形...  ",
		    "image": "https://img3.doubanio.com/view/subject/l/public/s33492042.jpg",
		    "mail":"https://baike.baidu.com/item/萨拉戈萨手稿/24121504?fr=aladdin",
		    "classBook":"文学"
		},
		{
		    "name": "1984",
		    "author": "乔治·奥威尔",
			"way": "《1984》是一部杰出的政治寓言小说，也是一部幻想小说。作品刻画了人类在极权主义社会的生存状态，有若一个永不褪色的警示标签，警醒世人提防这种预想中的黑暗成为现实。历经几十年，其生命力益显强大，被誉为20世纪影响最为深远的文学经典之一。",
		    "image": "https://img1.doubanio.com/view/subject/l/public/s4371408.jpg",
		    "mail":"http://t.icesmall.cn/bookDir/2/360/0.html",
		    "classBook":"文学"
		},
		{
		    "name": "飘",
		    "author": "玛格丽特·米切尔",
			"way": " 小说中的故事发生在1861年美国南北战争前夕。生活在南方的少女郝思嘉从小深受南方文化传统的熏陶，可在她的血液里却流淌着野性的叛逆因素。随着战火的蔓廷和生活环... ",
		    "image": "https://img1.doubanio.com/view/subject/l/public/s1078958.jpg",
		    "mail":"http://www.eywedu.net/piao/index.htm",
		    "classBook":"文学"
		},
		{
		    "name": "鲁滨逊漂流记",
		    "author": "笛福",
			"way": " 《鲁滨逊飘流记》是18世纪英国作家达尼尔·笛福的代表作品，也是一部具有广泛的世界性影响的作品。 小说以1704年一名苏格兰水手亚历山大·薛里基洛克航海遇险，... ",
		    "image": "https://img9.doubanio.com/view/subject/l/public/s1242786.jpg",
		    "mail":"http://www.eywedu.net/lbsplj/index.html",
		    "classBook":"文学"
		},
		{
		    "name": "傲慢与偏见",
		    "author": "奥斯丁",
			"way": " 《傲慢与偏见》是简·奥斯汀的代表作，是一部描写爱情与婚姻的经典小说。作品以男女主人公达西和伊丽莎白由于傲慢和偏见而产生的爱情纠葛为线索，共写了四起姻缘：伊丽... ",
		    "image": "https://img3.doubanio.com/view/subject/l/public/s4250062.jpg",
		    "mail":"http://t.icesmall.cn/bookDir/1/6/0.html",
		    "classBook":"文学"
		},
		{
		    "name": "局外人",
		    "author": " 阿尔贝·加缪",
			"way": "《局外人》是加缪小说的成名作和代表作之一，堪称20世纪整个西方文坛最具有划时代意义最著名小说之一，“局外人”也由此成为整个西方文学-哲学中最经典的人物形象和...  ",
		    "image": "https://img9.doubanio.com/view/subject/l/public/s4468484.jpg",
		    "mail":"https://yuedu.baidu.com/ebook/c9c9f5d8f121dd36a22d8251?key=%E5%B1%80%E5%A4%96%E4%BA%BA",
		    "classBook":"文学"
		},     
		{
		    "name": "老人与海",
		    "author": "海明威",
			"way": "本书讲述了一个渔夫的故事。古巴老渔夫圣地亚哥在连续八十四天没捕到鱼的情况下，终于独自钓上了一条大马林鱼，但这鱼实在大，把他的小船在海上拖了三天才筋疲力尽，被...  ",
		    "image": "https://img3.doubanio.com/view/subject/l/public/s1050021.jpg",
		    "mail":"http://www.zanghaihua.org/laorenyuhai/",
		    "classBook":"文学"
		},
		{
		    "name": "简爱",
		    "author": "夏洛蒂·勃朗特",
			"way": "《简爱》是英国女作家夏洛蒂·勃朗特的代表作品。女主人公简爱是一个追赶求平等与自主的知识女性形象，小说以其感人的对于一位“灰姑娘式”人物奋斗史的刻划取胜，《简...  ",
		    "image": "https://img3.doubanio.com/view/subject/l/public/s1050021.jpg",
		    "mail":"http://wap.tadu.com/book/catalog/2114?partId=22",
		    "classBook":"文学"
		}
    		]
   		}
    </script>
</body>
</html>